<template>
  <div class="flex-row-between tw-info-box">

<!--    总耗时-->
    <div class="tw-info-item" v-if="settingForm.showSpendTime" >
      <el-icon :size="iconSize"><Timer /></el-icon>
      {{info.time}}s
    </div>


<!--    准确度-->
    <div class="tw-info-item" v-if="settingForm.showAccuracy">
      <el-icon :size="iconSize">
        <i class="iconfont icon-mubiao" ></i>
      </el-icon>
      {{computedAccuracy}}%
    </div>
<!--    错误个数-->
    <div class="tw-info-item" v-if="settingForm.showErrorNum">
      <el-icon :size="iconSize"><CircleClose /></el-icon>
      {{ info.errorNum }}
    </div>
<!--    速度-->
    <div class="tw-info-item" v-if="settingForm.showSpeed">
      <el-icon :size="iconSize"><Odometer /></el-icon>
      {{computedSpeed}}  <span >字符/分钟</span>
    </div>
<!--    刷新-->
    <div class="tw-info-item clickable">
      <el-icon><RefreshRight @click="handleClickRefresh" /></el-icon>
    </div>
<!--    设置-->
    <div class="tw-info-item clickable">
      <el-icon @click="showSettingForm=true"><Setting /></el-icon>
    </div>

<!--    传送到body上-->
    <teleport to="body">
      <!--设置弹出框-->
      <el-dialog v-model="showSettingForm" title="显示设置" width="30%" draggable>
        <common-setting-form @cancel="showSettingForm=false" @submit="handleSubmit"></common-setting-form>
      </el-dialog>
    </teleport>


  </div>


</template>

<script lang="ts" setup>
import {reactive, ref, withDefaults, defineProps, computed,defineEmits} from "vue";
import CommonSettingForm from "@/components/form/CommonSettingForm.vue";
import {CommonSetting} from "@/ts/setting";
import {RefreshRight, Setting, Timer} from "@element-plus/icons";
import {TWInfo} from "@/ts/record";


  let props=withDefaults(defineProps<{
    setting:CommonSetting
    info:TWInfo
  }>(),{
    setting: ()=>{
      return{
        showAccuracy: true,
        showErrorNum: true,
        showProgress: true,
        showSpeed: true,
        showSpendTime: true
      }
    },
    info:()=>{
      return{
        content: undefined,
        currNum: 0,
        errorNum: 0,
        rightNum: 0,
        time: 0,
        total: 0
      }
    }
  })
  // 显示/隐藏设置菜单
  let showSettingForm=ref(false)
  let iconSize=18
  let settingForm=reactive<CommonSetting>(props.setting)
  let emit=defineEmits(["refresh"])


  // 计算准确度
  let computedAccuracy=computed(()=>{
    let total = props.info.total
    let rightN=props.info.rightNum
    if( total === 0){
      return 0
    }
    return (rightN/total*100).toFixed(2)
  })

  let computedSpeed=computed(()=>{
    let time = props.info.time
    let currNum =  props.info.currNum
    if(time === 0 || !time){
      return 0
    }
    let speed=currNum/time*60
    return speed.toFixed(0)
  })



  // 修改设置点击提交
  function handleSubmit(form:CommonSetting){
    settingForm=form
    showSettingForm.value=false
  }

 function handleClickRefresh(){
    emit("refresh")
 }

</script>

<style scoped lang="less">
  .tw-info-box{
    padding: 5px 3px;
    i{
      font-size: 18px;
    }
    .el-icon{
      margin-right: 5px;
    }
    span{
      font-size: 14px;
      color: #4b4b4b;
      margin: 0 2px;
    }
    .tw-info-item{
      margin: 0 10px;
      font-size: 14px;
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>